<template>
  <view class="module-wrapper">
    <view class="wrapper-scroll">
      <scroll-view
        class="scroll-Y"
        scroll-y="true"
        refresher-background="#eee"
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :scroll-top="scrollTop"
        @scrolltolower="loadMoreData"
        @refresherrefresh="refreshData"
      >
        <view class="list">
          <view class="list-item" v-for="item in dataList" :key="item.id">
            <view class="more" @click="openEdit(item.id)">更多 > ></view>
            <view class="title">
              <image class="tip" src="/static/images/fillout/list-tip.png" mode=""></image>
              <text class="val">{{ item.projectName }}</text>
            </view>
            <view class="row-box">
              <uni-row>
                <uni-col :span="8">
                  <view class="box">
                    <image class="box-icon" src="/static/images/fillout/list-ms.png" mode=""></image>
                    <text class="lab">模数</text>
                    <text class="val">{{ item.modulus }}</text>
                  </view>
                </uni-col>
                <uni-col :span="8">
                  <view class="box">
                    <image class="box-icon" src="/static/images/fillout/list-jc.png" mode=""></image>
                    <text class="lab">进尺</text>
                    <text class="val">{{ item.footage }}</text>
                  </view>
                </uni-col>
                <uni-col :span="8">
                  <view class="box">
                    <image class="box-icon" src="/static/images/fillout/list-sj.png" mode=""></image>
                    <text class="lab">循环时间</text>
                    <text class="val">{{ item.modulusCycleTime }} h</text>
                  </view>
                </uni-col>
              </uni-row>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="fixed-btn-box">
      <!-- <uni-datetime-picker type="data" :resetBtn="true" v-model="queryParams.createTime" @change="dateOnChange" @cancel="dateCancel">
        <view class="filter-box">
          <image class="filter-icon" src="/static/images/fillout/filter-icon.png" mode=""></image>
          <text class="filter-lab">筛选</text>
        </view>
      </uni-datetime-picker> -->

      <view class="btn-box">
        <view class="cust-btn" @click="openEdit()">新增填报</view>
      </view>
    </view>
  </view>
</template>

<script>
import { listProcess } from '@/api/person/excavationProcess.js';
export default {
  data() {
    return {
      scrollTop: 0,
      triggered: false,
      hasMore: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createTime: null
      },
      dataList: [],
      total: 0
    };
  },
  onShow() {
    this.queryParams.pageNum = 1;
    this.scrollTop = 0;
    this.hasMore = true;
    this.dataList = [];
    this.$nextTick(() => {
      this.getDataList();
    });
  },
  methods: {
    getDataList() {
      listProcess(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.dataList.push(...res.rows);
            this.total = res.total;
            this.hasMore = this.dataList.length < this.total;
          }
          this.triggered = false;
        })
        .catch((err) => {
          this.triggered = false;
        });
    },
    refreshData() {
      if (this.triggered) {
        return;
      }
      this.scrollTop = 0;
      this.triggered = true;
      this.queryParams.pageNum = 1;
      this.hasMore = true;
      this.dataList = [];
      this.getDataList();
    },
    loadMoreData() {
      if (this.triggered || !this.hasMore) {
        return;
      }
      this.queryParams.pageNum++;
      this.getDataList();
    },
    dateOnChange(e) {
      // this.queryParams.pageNum = 1;
      this.refreshData();
    },
    dateCancel(e){
      this.queryParams.createTime=null
      this.refreshData();
    },
    openEdit(id) {
      let params = id ? `?id=${id}` : '';
      this.$tab.navigateTo(`/pages/process/edit${params}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.module-wrapper {
  height: 100%;
  .wrapper-scroll {
    height: calc(100% - 114rpx);
    padding: 30rpx 16rpx;
  }
  .scroll-Y {
    height: 100%;
    overflow-y: auto;
  }
  .list {
    &-item {
      height: 265rpx;
      background: url('/static/images/fillout/list-card.png') no-repeat;
      background-size: 100%;

      position: relative;
      margin-bottom: 30rpx;

      .more {
        position: absolute;
        right: 27rpx;
        top: 5rpx;
        font-weight: 500;
        font-size: 20rpx;
        color: #ffffff;
      }

      .title {
        padding: 20rpx 16rpx;
        display: flex;
        align-items: center;
        .tip {
          width: 35rpx;
          height: 21rpx;
        }
        .val {
          font-weight: bold;
          font-size: 36rpx;
          color: #102c59;
          padding-left: 10rpx;
        }
      }
      .row-box {
        padding: 0 30rpx;
      }
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        .box-icon {
          width: 60rpx;
          height: 60rpx;
        }
        .lab {
          font-weight: 500;
          font-size: 24rpx;
          color: #102c59;
          padding-top: 10rpx;
        }
        .val {
          font-family: 快看世界体, 快看世界体;
          font-size: 30rpx;
          color: #102c59;
        }
      }
    }
  }
}

.fixed-btn-box {
  justify-content: space-between;

  .filter-box {
    display: flex;
    flex-direction: column;
    padding-left: 30rpx;
    .filter-icon {
      width: 40rpx;
      height: 40rpx;
    }
    .filter-lab {
      font-size: 24rpx;
      color: #102c59;
    }
  }
  .btn-box {
    // width: 560rpx;
    width: 100%;
    height: 70rpx;
  }
}
</style>
